<template>
  <div class="mod-prod-info">
    <el-form
      @submit.native.prevent
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      label-width="120px"
      size="small"
    >
      <div class="panel">
        <div class="title">
          <div class="blue-line"></div>
          <div class="title-label">派单权重设置</div>
        </div>
        <div class="weight-setting">
          <el-form-item prop="orderWeight.order" label="接单量：">
            <el-input
              v-if="isEditHandle"
              v-model="dataForm.orderWeight.order"
              type="number"
              placeholder="请输入接单量"
              class="input-with-select"
              oninput="value=value.replace(/[^0-9]/g,'')"
            >
              <div slot="append">%</div>
            </el-input>
            <div v-else>{{ dataForm.orderWeight.order }}%</div>
          </el-form-item>
          <div class="add-symbol">+</div>
          <el-form-item
            prop="orderWeight.distance"
            label="距离："
            style="margin-left: -50px"
          >
            <el-input
              v-if="isEditHandle"
              v-model="dataForm.orderWeight.distance"
              type="number"
              placeholder="请输入接单量"
              class="input-with-select"
              oninput="value=value.replace(/[^0-9]/g,'')"
            >
              <div slot="append">%</div>
            </el-input>
            <div v-else>{{ dataForm.orderWeight.distance }}%</div>
          </el-form-item>
          <div class="add-symbol">=</div>
          <div class="add-symbol">100%</div>
        </div>
        <div class="red-tip">
          <el-alert
            title="提示：系统指派订单，需配置派单权重分派订单给指定骑手，举例: 接单量20%+距离80%=100%。"
            type="error"
            :closable="false"
          >
          </el-alert>
        </div>
      </div>

      <div class="panel">
        <div class="title">
          <div class="blue-line"></div>
          <div class="title-label">拒绝接单限制</div>
        </div>
        <div class="panel-item">
          <el-form-item prop="refuseNumber" label="拒绝接单次数：">
            <el-input
              v-if="isEditHandle"
              v-model="dataForm.refuseNumber"
              type="number"
              maxlength="6"
              placeholder="请输入拒绝接单次数"
              class="input-with-select"
              oninput="value=value.replace(/[^0-9.]/g,'').substring(0, 6)"
            >
              <div slot="append">次</div>
            </el-input>
            <div v-else>{{ dataForm.refuseNumber }}次</div>
          </el-form-item>

          <div class="red-tip">
            <el-alert
              title="提示：系统指派订单时，骑手拒绝接单的次数限制。"
              type="error"
              :closable="false"
            >
            </el-alert>
          </div>
        </div>
        <div class="panel-item">
          <el-form-item
            v-if="isEditHandle"
            :label="index == 0 ? '拒绝原因：' : ''"
            v-for="(item, index) in dataForm.refuseReason"
            :prop="`refuseReason[${index}]`"
            :rules="dataRule.refuseReason"
            :key="index"
          >
            <div class="flex-cell">
              <el-input
                v-model="dataForm.refuseReason[index]"
                type="text"
                maxlength="50"
                placeholder="请输入拒绝原因"
                class="input-with-select"
              >
              </el-input>
              <div
                class="add-refuse-reason"
                v-if="index === 0"
                @click="addRefuseReason(item, index)"
              >
                + 添加拒绝原因
              </div>
              <div
                class="del-refuse-reason"
                v-if="index !== 0"
                @click="delRefuseReason(item, index)"
              >
                <i class="el-icon-delete"></i>
              </div>
            </div>
          </el-form-item>

          <el-form-item v-if="!isEditHandle" label="'拒绝原因：">
            <div style="display: flex; flex-wrap: wrap">
              <div
                class="refuse-reason-item"
                v-for="(text, t_index) in dataForm.refuseReason"
                :key="t_index"
                 v-if="text"
              >
                <span>{{ text }}</span>
              </div>
            </div>
          </el-form-item>

          <div :class="['red-tip', !isEditHandle ? 'm-b-20' : '']">
            <el-alert
              title="提示：系统指派订单时，骑手拒绝接单的次数限制。"
              type="error"
              :closable="false"
            >
            </el-alert>
          </div>
        </div>
        <el-form-item prop="riderRepeat" class="l-label">
          <div slot="label" style="width: 135px">重复给骑手派单：</div>
          <template v-if="isEditHandle">
            <el-radio v-model="dataForm.riderRepeat" :label="1">是</el-radio>
            <el-radio v-model="dataForm.riderRepeat" :label="0">否</el-radio>
          </template>
          <template v-else>
            {{ dataForm.riderRepeat == 1 ? "是" : "否" }}
          </template>
        </el-form-item>
        <div class="red-tip">
          <el-alert
            title="提示：骑手拒绝接系统指派订单后, 系统指派订单下一个指派人, 是否包含该骑手。"
            type="error"
            :closable="false"
          >
          </el-alert>
        </div>
      </div>
      <el-form-item v-if="isEditHandle">
        <div class="default-btn primary-btn" @click="dataFormSubmit()">
          {{ $t("outlet.saveSettings") }}
        </div>
      </el-form-item>

      <el-form-item v-else>
        <div class="default-btn primary-btn" @click="isEditHandle = true">
          {{ $t("outlet.edit") }}
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    const validateOrderWeightOrder = (rule, value, callback) => {
      if (value === null || value === "") {
        callback(new Error("接单量权重不能为空"));
      } else if (value > 100 || value < 0) {
        callback(new Error("请输入0-100的数字"));
      } else {
        callback();
      }
    };

    const validateOrderWeightDistance = (rule, value, callback) => {
      if (value === null || value === "") {
        callback(new Error("距离权重不能为空"));
      } else if (value > 100 || value < 0) {
        callback(new Error("请输入0-100的数字"));
      } else {
        callback();
      }
    };
    const validateRefuseReason = (rule, value, callback) => {
      if (value.trim() == "") {
        callback(new Error("拒绝原因不能为空"));
      } else {
        callback();
      }
    };
    const validateRefuseNumber = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("拒绝接单次数不能为空"));
      } else if (value < 1) {
        callback(new Error("拒绝接单次数至少为1次"));
      } else {
        callback();
      }
    };
    return {
      isEditHandle: false,
      dataForm: {
        orderWeight: {
          order: 0,
          distance: 0,
        },
        refuseNumber: 1,
        refuseReason: [""],
        riderRepeat: "",
      },
      dataRule: {
        "orderWeight.order": [
          { validator: validateOrderWeightOrder, trigger: "blur" },
        ],
        "orderWeight.distance": [
          { validator: validateOrderWeightDistance, trigger: "blur" },
        ],
        refuseNumber: [
          {
            required: true,
            validator: validateRefuseNumber,
            trigger: "blur",
          },
        ],
        refuseReason: [
          {
            required: true,
            validator: validateRefuseReason,
            trigger: "blur",
            message: "拒绝原因不能为空",
          },
        ],
        riderRepeat: [
          { required: true, message: "请选择重复给骑手派单", trigger: "blur" },
        ],
      },
      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
    };
  },
  watch: {
    "dataForm.orderWeight.distance": function (newVal, oldVal) {
      this.dataForm.orderWeight.order = 100 - newVal;
    },
    "dataForm.orderWeight.order": function (newVal, oldVal) {
      this.dataForm.orderWeight.distance = 100 - newVal;
    },
  },
  created: function () {
    this.getConfigInfo();
  },
  methods: {
    /**
     * 获取店铺楼内闪送的配置
     */
    getConfigInfo() {
      this.$http({
        url: this.$http.adornUrl(`/platform/Dictionary/getRiderOrderConfig`),
        method: "get",
        params: this.$http.adornParams(),
      }).then(({ data }) => {
        if (data) {
          if (!data.refuseReason.length) {
            data.refuseReason = [""];
          }
          this.dataForm = data;
        }
      });
    },
    addRefuseReason() {
      this.dataForm.refuseReason.push("");
    },
    delRefuseReason(item, index) {
      this.$confirm("确定要删除这条拒绝原因吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        this.dataForm.refuseReason.splice(index, 1);
      });
    },
    // 表单提交
    dataFormSubmit() {
      let p = {
        ...this.dataForm,
        orderWeightJsonStr: JSON.stringify(this.dataForm.orderWeight),
      };
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/platform/Dictionary/saveRiderOrderConfig`
            ),
            method: "post",
            data: this.$http.adornData(p),
          }).then(({}) => {
            this.getConfigInfo();
            this.isEditHandle = false;
            this.$message({
              message: this.$i18n.t("publics.operation"),
              type: "success",
              duration: 1500,
            });
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__label {
  font-weight: bold;
}
.l-label {
  &::v-deep .el-form-item__label {
    width: 135px !important;
    display: flex;
  }
}
.mod-prod-info {
  width: 80%;
  margin: 0 auto;
  .title {
    display: flex;
    color: #333333;
    .title-label {
      font-size: 14px;
      font-weight: bold;
    }
    .blue-line {
      width: 4px;
      height: 14px;
      background: #1890ff;
      border-radius: 2px;
      margin-right: 10px;
    }
    margin-bottom: 20px;
  }

  .weight-setting {
    display: flex;
    .add-symbol {
      line-height: 32px;
      margin-left: 10px;
    }
  }

  .input-with-select {
    width: 220px;
    margin-right: 10px;
    &::v-deep .el-input-group__append {
      background-color: transparent;
      font-weight: bold;
    }
    .label {
      font-weight: bold !important;
      font-size: 14px;
      color: #333333;
    }
  }
}
.red-tip {
  margin-left: 120px;
  &::v-deep .el-alert--error.is-light {
    width: max-content;
  }
}
.panel,
.panel-item {
  margin-bottom: 24px;
}

.for-cell {
  display: flex;
  margin-bottom: 10px;
}

.add-refuse-reason {
  width: 128px;
  height: 34px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #1890ff;
  color: #1890ff;
  font-size: 14px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
}

.del-refuse-reason {
  width: 128px;
  height: 34px;
  background: #ffffff;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #f34b4b;
  font-size: 14px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
}
.el-icon-delete {
  color: #f34b4b;
}
.refuse-reason-item {
  width: max-content;
  padding: 0 10px;
  height: 36px;
  line-height: 36px;
  background: rgba(13, 130, 238, 0.1);
  border-radius: 4px;
  border: 1px solid rgba(24, 144, 255, 0.05);
  font-weight: 400;
  font-size: 14px;
  color: #1890ff;
  margin-right: 12px;
  margin-bottom: 10px;
}
.flex-cell {
  display: flex;
}
.m-b-20 {
  margin-top: -20px;
}
</style>
